<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="/WEB-INF/jsp/component/common.jsp" %>
<!DOCTYPE html>
<html>
<head>
    <title>套餐修改</title>
    <meta charset="utf-8">
    <!-- Bootstrap Core CSS -->
    <link href="${css}/bootstrap.min.css" rel="stylesheet"/>
    <!-- bootstrapValidator验证 -->
    <link href="${assets}/bootstrapValidator/css/bootstrapValidator.css" rel="stylesheet"/>
    <!-- bootstrapSelect -->
    <link href="${assets}/bootstrapSelect/css/bootstrap-select.min.css" rel="stylesheet"/>
</head>
<body style="width: 98%">
<form id="myForm" class="form-horizontal" method="post" >
    <input type="hidden" name="id" value="${packages.id}" />
    <div class="form-group">
        <label for="packageName" class="col-sm-2 control-label">套餐名称</label>
        <div class="col-sm-10">
            <input type="text" class="form-control" id="packageName" name="packageName" value="${packages.packageName}"
                   placeholder="请输入套餐名称">
        </div>
    </div>
    <div class="form-group">
        <label for="price" class="col-sm-2 control-label">价格</label>
        <div class="col-sm-10">
            <input type="text" class="form-control" id="price" name="price" value="${packages.price}"
                   placeholder="请输入价格">
        </div>
    </div>
    <div class="form-group">
        <label for="info" class="col-sm-2 control-label">介绍</label>
        <div class="col-sm-10">
            <textarea class="form-control" id="info" name="info" rows="5" placeholder="请输入介绍">${packages.info}</textarea>
        </div>
    </div>
    <div class="form-group">
        <label for="instrumentIds" class="col-sm-2 control-label">仪器</label>
        <div class="col-sm-10">
            <select id="instrumentIds" name="instrumentIds" class="selectpicker show-tick form-control" multiple data-live-search="true">
                <c:forEach items="${instrumentList}" var="instrument">
                    <option value="${instrument.id}" <c:if test='${instrument.isDel}'>class="get-class" disabled</c:if> >${instrument.instrumentName}</option>
                </c:forEach>
            </select>
        </div>
    </div>
    <div class="form-group">
        <label for="state" class="col-sm-2 control-label">套餐状态</label>
        <div class="col-sm-10">
            <select id="state" name="state" class="form-control">
                <option <c:if test='${packages.state==1}'>selected</c:if> value="1">启用</option>
                <option <c:if test='${packages.state==0}'>selected</c:if> value="0">禁用</option>
            </select>
        </div>
    </div>
    <div class="modal-footer" style="text-align: center ">
        <button type="button" class="btn btn-default" data-dismiss="modal" id="closeModalButt">关闭</button>
        <button type="submit" class="btn btn-primary">保存</button>
    </div>
</form>

<!-- jQuery -->
<script src="${js}/jquery-1.9.1.min.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="${js}/bootstrap.min.js"></script>

<script src="${js}/bootbox.js"></script>
<!-- bootstrapValidator验证 -->
<script src="${assets}/bootstrapValidator/js/bootstrapValidator.js"></script>
<!-- bootstrapValidator验证 国际化中文 -->
<script src="${assets}/bootstrapValidator/js/language/zh_CN.js"></script>
<!-- bootstrapSelect -->
<script src="${assets}/bootstrapSelect/js/bootstrap-select.min.js"></script>

<script type="text/javascript">
    $(document).ready(function() {
        //设置仪器下拉默认勾选值
        <c:forEach items="${packageItemList}" var="packageItem">
            $("#instrumentIds").find("option[value='${packageItem.instrumentId}']").attr("selected",true);
        </c:forEach>

        //初始化bootstrapSelect下拉框样式
        $('.selectpicker').selectpicker({
            noneSelectedText:'请选择...'
        });

        $('#myForm').bootstrapValidator({
            message: 'This value is not valid',
            feedbackIcons: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                packageName: {
                    validators: {
                        notEmpty: true
                    }
                },
                instrumentIds: {
                    validators: {
                        notEmpty: true
                    }
                }
            }
        }).on('success.form.bv', function (e) {
            e.preventDefault();
            $.ajax({
                url:'${URL_ADM_PACKAGE_UPDATE}',
                type:'post',
                data:$('#myForm').serialize(),
                async : false, //默认为true 异步
                error:function(){
                    alert('error');
                },
                success:function(data){
                    window.parent.closeModal();
                }
            });
        });

        //关闭弹出框
        $("#closeModalButt").on("click",function(){
            window.parent.simpleCloseModal();
        });

    });

</script>
</body>
</html>